<script setup lang="ts">
import * as THREE from "three"; // 引入threejs
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 导入轨道控制器

import { ref, onMounted } from "vue";

const mainRef = ref();

let cube: any;
let renderer: any;
let camera: any;
let scene: any;

function init() {
  // 创建一个场景 (舞台)
  scene = new THREE.Scene();
  // 生成一个相机 （眼睛）
  // 第一个参数是 视野角度
  // 第二个参数是 长宽比
  // 第三个参数是 和第四个参数 近截面（near）和远截面（far）
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  // 创建一个渲染器 (canvas)
  renderer = new THREE.WebGLRenderer();
  // 设置renderer的大小
  // @ts-ignore
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 把renderer添加到页面总
  mainRef.value.appendChild(renderer.domElement);

  // 生成一个形状
  const geometry = new THREE.BoxGeometry(1, 1, 1);

  /*纯红色*
  // 创建一个最简单的颜料
  const material = new THREE.MeshBasicMaterial({ color: "red" }); // 显示纯红色
  /**/

  /*多张图片*
  // 使用纹理来生成材料
  // 需要一个纹理加载器
  const textureLoader = new THREE.TextureLoader(); 
  const texture = textureLoader.load('/head.jpg'); // 加载图片到纹理中
  const material = new THREE.MeshBasicMaterial({ map: texture });
  /**/
  
  /*多张图片*/
  // 添加多张图片
  const textureLoader = new THREE.TextureLoader(); 
  // 加载6张不同的图片
  const texture1 = textureLoader.load('@/assets/img/5.png');
  const texture2 = textureLoader.load('@/assets/img/6.png');
  const texture3 = textureLoader.load('@/assets/img/4.png');
  const texture4 = textureLoader.load('@/assets/img/3.png');
  const texture5 = textureLoader.load('@/assets/img/2.png');
  const texture6 = textureLoader.load('@/assets/img/1.png');
  // 生成6中材料
  const m1 = new THREE.MeshBasicMaterial({ map: texture1 }); 
  const m2 = new THREE.MeshBasicMaterial({ map: texture2 }); 
  const m3 = new THREE.MeshBasicMaterial({ map: texture3 }); 
  const m4 = new THREE.MeshBasicMaterial({ map: texture4 }); 
  const m5 = new THREE.MeshBasicMaterial({ map: texture5 }); 
  const m6 = new THREE.MeshBasicMaterial({ map: texture6 }); 
  const material = [ m1, m2, m3, m4, m5, m6 ]; // 六面的材料组成一个数组
  /**/

  // 通过形状和材料生产一个网格模型---正方形
  cube = new THREE.Mesh(geometry, material);
  // 把正方体添加到场景中
  scene.add(cube);

  camera.position.z = 3;

  // 使用相机（眼睛）去观看场景
  renderer.render(scene, camera);

  // 相机移动
  // setInterval(()=>{
  //   camera.position.x += 0.1;
  //   camera.position.y += 0.1;
  //   renderer.render(scene, camera);
  // }, 100);

  // 物体移动
  // setInterval(()=>{
  //   cube.rotation.x += 0.1;
  //   cube.rotation.y += 0.1;
  //   renderer.render(scene, camera);
  // }, 100);


  // 添加控制器
  // 创建轨道控制器 相机围绕模型看到的角度
  const OrbitControl = new OrbitControls(camera, renderer.domElement);
  // 设置轨道自然
  OrbitControl.enableDamping = true;
  // 设置惯性
  OrbitControl.update();

  animate();
}

function animate() {
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  // cube.rotation.z += 0.01;
  renderer.render(scene, camera); // 显示依次
  requestAnimationFrame(animate); // 一段事件之后界面会自动刷新
}

onMounted(init);
</script>

<template>
  <div ref="mainRef"></div>
</template>

<style scoped>
</style>